import { FC } from "react";
import { Image, View } from "@tarojs/components";
import { Backdrop } from "@taroify/core"
import { GStyleSheet } from "@/utils/DarkMode";
import triangleIcon from '@/assets/images/triangle.png';
import MenuItem, { IMenuItemProps } from "./menuItem";

import './index.scss';

const dstyle = GStyleSheet.create({
  container: {

  }
});


interface IMediaItemProps {
  data: IMenuItemProps[];
  visible: boolean;
  onClose: () => void;
}


const MenuBar: FC<IMediaItemProps> = ({ data, children, visible, onClose }) => {

  const styles = dstyle.useDynamicStyle();

  return (
    <View style={styles.container} className='centerFlex'>
      <View>{children}</View>
      <View className='config'>
        <Backdrop open={visible} onClose={onClose} closeable >
          <View className='at-modal__container'>
            <Image style={{ position: 'absolute', width: 18, height: 12, top: -12, right: 10 }} src={triangleIcon} />
            <View className='menuView'>
              {data.map((item) => {
                return <MenuItem {...item} key={item.title} />
              })}
            </View>
          </View>
        </Backdrop>
      </View>
    </View>
  );
};

export default MenuBar;
